<script setup>
import Logo from '@/components/Logo.vue'
import Lang from '@/components/Lang.vue'
import { useUserStore } from '@/stores/user.js'
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { getReportDetailApi } from '@/apis/user'
import { showToast } from 'vant';
const userStore = useUserStore()
const isPC = userStore.isPC
const route = useRoute()

let id = route.query.id

let info = ref({})

const getReportDetail = async () => {
  const res = await getReportDetailApi(Number(id))
  if (res.data.code == 200) {
    info.value = res.data.data
  } else {
    showToast(res.data.msg)
  }
}

getReportDetail()

</script>

<template>
  <div class="reportindex box">
    <Logo />
    <div class="reeport_container cbox clmcenter">
      <!-- 语言 -->
      <div class="langbox">
        <Lang />
        <img src="@/assets/img/btn_list.png" class="btn_list" @click="$router.replace('/cn/list')" />
      </div>
      <!-- 内容 -->
      <div class="content clmstart">
        <div class="report_title clmcenter">
          <p :style="{ paddingTop: isPC ? '0' : '20px' }">审线报告</p>
        </div>
        <div class="companybox">
          <div>客户名称：{{ info.customername }}</div>
          <div>审线人：{{ info.overview?.new_la_creator }}</div>
        </div>
        <div class="reportinfobox">
          <div class="reportinfo">
            <p>审线时间：{{ info.overview?.createdon }}</p>
            <p>生产线别：1#{{ info.overview?.new_customerline }}</p>
            <p>预处理工艺：{{ info.overview?.new_plantfunction_name }}</p>
          </div>
          <div class="morebtnbox">
            <button type="button" class="btnani"
              @click="$router.replace({ path: '/cn/detail', query: { id: info.overview?.id } })">点击查看完整报告</button>
            <img src="@/assets/img/hand.png" class="hand btnani" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.reportindex {
  .reeport_container {
    background: url('@/assets/img/containbg.jpg') no-repeat;
    background-size: cover;
    .langbox {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      z-index: 9;
      .btn_list {
        width: 51px;
        margin-top: 21px;
        margin-right: 30px;
      }
    }
    // 内容
    .content {
      position: relative;
      width: 100%;
      height: 1070px;
      background: url('@/assets/img/contbg.png') no-repeat;
      background-size: 100% 100%;
      font-weight: 500;
      margin-top: 40px;
      .report_title {
        width: 350px;
        height: 83px;
        margin-top: 150px;
        margin-left: 36px;
        transform: rotate(-10deg);
        p {
          font-family: 'DOUYUfont';
          font-size: 4.28rem;
          color: #00508f;
        }
      }
      .companybox {
        margin-top: 240px;
        margin-left: 150px;
        transform: rotate(-10deg);
        div {
          font-size: 2.14rem;
          color: #ffffff;
          background-color: #004d91;
          margin-bottom: 22px;
          text-align: left;
          padding: 10px;
        }
      }
      .reportinfobox {
        position: absolute;
        bottom: 180px;
        width: 510px;
        transform: rotate(-10deg);
        display: flex;
        margin-left: 170px;
        .reportinfo {
          margin-top: 60px;
          p {
            text-align: left;
            font-size: 1.78rem;
            color: #004e93;
            line-height: 1.8;
          }
        }
        .morebtnbox {
          position: absolute;
          top: 0;
          right: 10px;
          width: 235px;
          height: 57px;
          button {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 40px;
            background: #004e93;
            color: #ffffff;
            font-size: 1.57rem;
            animation-delay: 0.5s;
          }
          .hand {
            position: absolute;
            right: -35px;
            top: 33px;
          }
        }
      }
    }
  }
}
</style>
